<template>
	<div class="head">
		<img src="./bg.png" alt="" />
	</div>

	<van-tabs
		ref="navTabs"
		scrollspy
		sticky
		title-active-color="#ff6600"
		color="#ff6600"
		class="nav-tab"
		@scroll="({ scrollTop }) => (this.showFixedFoot = scrollTop > 600)"
	>
		<van-tab title="我要投保">
			<van-form
				@submit="onSubmit"
				class="box round form"
				label-width="70"
				ref="form"
			>
				<flex-box align="center" justify="space-between" class="form__title">
					<img src="./down-icon.png" alt="" />
					<p>
						{{ telphonePass ? '填写被保人信息' : '凭手机号'
						}}<span class="red">免费领取</span>
					</p>
					<img src="./down-icon.png" alt="" />
				</flex-box>
				<transition name="down">
					<template v-if="!telphonePass">
						<van-field
							class="cell"
							clearable
							v-model="phone"
							name="name"
							label="手机号"
							placeholder="信息保密，仅用于投保"
							:rules="[
								{ pattern: REGEXP.telphone, message: '请输入正确的手机号' }
							]"
						/>
					</template>
				</transition>
				<transition name="down">
					<div v-if="telphonePass">
						<van-field
							class="cell"
							clearable
							v-model="name"
							name="name"
							label="姓名"
							placeholder="信息保密，仅用于投保"
							:rules="[{ required: true, message: '姓名不能为空' }]"
						/>
						<van-field
							class="cell"
							clearable
							v-model="idNum"
							name="idNum"
							label="身份证"
							placeholder="信息保密，仅用于投保"
							:rules="[
								{
									required: true,
									message: '请填写身份证号'
								}
							]"
						/>
					</div>
				</transition>

				<div class="xj-tip">
					累计已有
					<span class="red">364980</span>
					人领取
				</div>
				<button ref="submit" type="submit" class="button">
					<img src="./btn.png" alt="" />
				</button>
				<div class="foot">
					<van-checkbox v-model="isCheck"></van-checkbox> &nbsp; 我阅读并同意

					<span class="em" @click="showXuzhi = true">投保须知</span>
					<span class="em" @click="showYueding = true">特别约定</span>
					<span class="em" @click="showHealth = true">健康告知</span>
					<span class="em" @click="showDetail = true">保障详情</span>
					<span class="em" @click="showFangan = true">保障方案</span>
					<span class="em" @click="showTiaokuan = true">保险条款</span>
				</div>
			</van-form>
		</van-tab>

		<van-tab title="产品特色">
			<div class="box round tese-img">
				<img src="./bg.png" alt="" />
			</div>
		</van-tab>
	</van-tabs>

	<!-- 投保须知 -->
	<van-popup
		v-model:show="showXuzhi"
		teleport="body"
		position="bottom"
		lock-scroll
		closeable
		safe-area-inset-bottom
		:style="{ height: '90vh' }"
	>
		<van-nav-bar title="投保须知" />
		<div class="popup-cont">
			<pdf
				style="min-height: 100%"
				url="/mobile/pinganWorriesFree/pdf/重疾无忧（福利版）投保须知.pdf"
			/>
		</div>
	</van-popup>
	<!-- 特别约定 -->
	<van-popup
		v-model:show="showYueding"
		teleport="body"
		position="bottom"
		closeable
		lock-scroll
		safe-area-inset-bottom
		:style="{ height: '90vh' }"
	>
		<van-nav-bar title="特别约定" />
		<div class="popup-cont">
			<pdf
				style="min-height: 100%"
				url="/mobile/pinganWorriesFree/pdf/重疾无忧（福利版）特别约定.pdf"
			/>
		</div>
	</van-popup>
	<!-- 健康告知 -->
	<van-popup
		v-model:show="showHealth"
		teleport="body"
		position="bottom"
		lock-scroll
		closeable
		safe-area-inset-bottom
		:style="{ height: '90vh' }"
	>
		<van-nav-bar title="健康告知" />
		<div class="popup-cont">
			<pdf
				style="min-height: 100%"
				url="/mobile/pinganWorriesFree/pdf/重疾无忧（福利版）健康告知.pdf"
			/>
		</div>
	</van-popup>
	<!-- 保障详情 -->
	<van-popup
		v-model:show="showDetail"
		teleport="body"
		position="bottom"
		lock-scroll
		closeable
		safe-area-inset-bottom
		:style="{ height: '90vh' }"
	>
		<van-nav-bar title="保障详情" />
		<div class="popup-cont">
			<pdf
				style="min-height: 100%"
				url="/mobile/pinganWorriesFree/pdf/重疾无忧（福利版）保障详情-100种重大疾病.pdf"
			/>
		</div>
	</van-popup>
	<!-- 保险条款 -->
	<van-popup
		v-model:show="showTiaokuan"
		teleport="body"
		position="bottom"
		lock-scroll
		closeable
		safe-area-inset-bottom
		:style="{ height: '90vh' }"
	>
		<van-nav-bar title="保险条款" />
		<div class="popup-cont">
			<pdf
				style="min-height: 100%"
				url="/mobile/pinganWorriesFree/pdf/重疾无忧（福利版）保险条款.pdf"
			/>
		</div>
	</van-popup>
	<!-- 保障方案 -->
	<van-popup
		v-model:show="showFangan"
		teleport="body"
		position="bottom"
		lock-scroll
		closeable
		safe-area-inset-bottom
		:style="{ height: '90vh' }"
	>
		<van-nav-bar title="保障方案" />
		<div class="popup-cont">
			<pdf
				style="min-height: 100%"
				url="/mobile/pinganWorriesFree/pdf/重疾无忧（福利版）方案.pdf"
			/>
		</div>
	</van-popup>
	<div class="ic-foot">
		版权所有@2023 白鸽宝保险经纪有限公司<br />
		ICP备案  闽ICP备15001111号-2
	</div>
	<div class="fix-place"></div>

	<van-popup
		v-model:show="showLast"
		teleport="body"
		position="center"
		lock-scroll
		:style="{ background: 'rgba(0, 0, 0, 0)' }"
	>
		<img src="./last.webp" alt="" />
		<flex-box
			class="last-btn"
			justify="center"
			align="center"
			@click.native="handleJump"
		>
			<p><b>立即查看</b>（{{ autoJump }}s）</p>
		</flex-box>
	</van-popup>
</template>

<script>
import { mapGetters } from 'vuex'
import { presentOrder, checkEffective, aesEncrypt } from '@/api/index'
import { showToast, showLoadingToast, showFailToast, closeToast } from 'vant'
import qs from 'qs'
import * as REGEXP from '@/const/REGEXP'
import AgreePopup from './agree'
import axios from 'axios'
const URL_QUERY = qs.parse(location.search.slice(1))
export default {
	name: 'HomeView',
	components: { AgreePopup },
	data() {
		return {
			REGEXP,
			telphonePass: '',
			phone: process.env.NODE_ENV === 'development' ? '1730600630' : '',
			isCheck: false,

			name: process.env.NODE_ENV === 'development' ? '叶润' : '',
			idNum: process.env.NODE_ENV === 'development' ? '350681199511050010' : '',
			showXuzhi: false, // 保障详情
			showYueding: false, // 保障详情
			showHealth: false, // 保障详情
			showDetail: false, // 保障详情
			showTiaokuan: false, // 保障详情
			showFangan: false, // 保障详情

			showLast: false, // 最终弹窗
			autoJump: 3,
			orderNo: ''
		}
	},
	watch: {
		phone: {
			handler(val) {
				if (REGEXP.telphone.test(val)) {
					this.telphonePass = val
				}
			},
			immediate: true
		}
	},
	async beforeRouteEnter(to, from, next) {
		const curSearch = qs.parse(location.search.slice(1))

		try {
			if (curSearch.biz) {
				await checkEffective(curSearch.biz)
				next()
			} else {
				throw new Error('未知错误\n非法链接')
			}
		} catch (e) {
			if (process.env.NODE_ENV === 'development') {
				next()
			} else {
				showFailToast({
					forbidClick: true,
					duration: 0,
					message: e.message
				})
			}
		}
	},
	methods: {
		onSubmit() {
			if (!this.telphonePass) {
				this.telphonePass = this.phone
			} else {
				this.payFn()
			}
		},
		payFn(hh) {
			this.isCheck = true

			showLoadingToast({
				message: '正在提交',
				forbidClick: true,
				duration: 0
			})
			presentOrder({
				name: this.name,
				idNum: this.idNum,
				phone: this.phone
			})
				.then((res) => {
					console.log(res)

					const eyeData = {
						requestHead: {
							timestamp: Math.floor(Date.now() / 1000)
						},
						requestBody: {
							biz_order_sn: res.data,
							isee_biz: window.isee_biz
						}
					}

					return aesEncrypt(eyeData)
						.then(({ data: encrypted }) => {
							return axios({
								url: 'http://liuliangtf.baigebaodev.com/api/Entrance/TracBack',
								method: 'post',
								data: encrypted
							}).finally((e) => {
								console.log(e)
							})
						})
						.finally(() => {
							closeToast()
							this.orderNo = res.data
							this.showLast = true
							setInterval(() => {
								if (this.autoJump === 1) {
									this.handleJump()
								} else {
									this.autoJump--
								}
							}, 1000)
						})
				})
				.finally(() => {})
		},

		handleJump() {
			const baseURL =
				process.env.NODE_ENV === 'development'
					? 'http://192.168.1.112:8080/mobile/tkomnipotence'
					: '/bg0002.html'
			location.href = baseURL + '?orderNo=' + this.orderNo
		}
	}
}
</script>

<style lang="scss" scoped>
.nav-tab ::v-deep {
	.van-sticky {
		position: fixed;
		top: -30vw;
		left: 0;
		right: 0;
	}
	.van-sticky--fixed {
		top: 0;
	}
}
.head {
	// margin-bottom: $space_3;
	img {
		display: block;
		width: 100%;
		height: 57vw;
		object-position: left top;
		object-fit: cover;
	}
}
.shadow {
	box-shadow: 0 0 $space_2 rgba(10, 10, 10, 0.05);
}
.round {
	border-radius: $border_radius_6;
}
.form {
	padding: 54px 48px 40px;

	&__title {
		font-size: 40px;
		font-weight: 600;
		margin: 0 $space_4 $space_6;

		img {
			height: 58px;
			width: auto;
		}
	}
}

.cell {
	background: #fef8f7;
	border: 1px solid #ff521c;
	border-radius: 99px;
	padding: $space_3 $space_7;
	font-size: $font_medium_x;
	margin-bottom: $space_2;
	::v-deep label {
		font-weight: 600;
	}
}
.red {
	color: $color_err;
}
.xj-tip {
	margin: 64px 0 54px;
	text-align: center;
	font-size: $font_medium_x;
	color: #666;
}
.button {
	padding: 0;
	outline: none;
	border: none;
	background-color: transparent;
	margin: 0 $space_4 $space_5;
	animation: botton 1s linear infinite;
	animation-direction: alternate-reverse;
	img {
		display: block;
		margin: 0 -30px;
		width: calc(100% + 60px);
		height: auto;
	}
}

@keyframes botton {
	from {
		transform: scale(0.97);
	}
	to {
		transform: scale(1.07);
	}
}

.tip {
	border-radius: $border_radius_1;
	font-size: $font_small;
	color: #999;
	line-height: 2;
	padding: $space_2 $space_3;
	margin: $space_3;
	background: #fff;
}

.gay {
	color: #999;
	font-size: $font_medium;
}
img {
	display: block;
	height: auto;
	width: 100%;
}

.popup-cont {
	overflow-y: scroll;
	height: calc(100% - var(--van-nav-bar-height));
	font-size: $font_medium;
	line-height: 1.7;
	position: relative;
}
.popup-cont ::v-deep {
	.van-tabs__wrap {
		position: sticky;
		top: 0;
	}
}

iframe {
	display: block;
	width: 100%;
}

.popup-cont-head {
	position: sticky;
	top: 0;
	border-bottom: 1px solid #eee;
	background: #fff;
	--van-dropdown-menu-height: 84px;
	.thead {
		color: #333;
		font-size: $font_medium;
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		justify-items: center;
		line-height: 3;
	}
}
::v-deep {
	.van-dropdown-menu__bar {
		box-shadow: none !important;
		border-bottom: 1px #f5f5f5 solid;
	}

	.com-rich-text {
		font-size: $font_medium;
		padding: $space_3;
		line-height: 1.84;
		color: #444;

		strong span,
		h1,
		h4,
		h5,
		b {
			font-weight: 600;
		}
		h3.title {
			font-size: $font_large;
			color: $color_err;
		}
		h4 {
			padding-top: $space_2;
		}

		h5 {
			padding-top: $space_2;
			padding-bottom: $space_1;
		}

		table {
			width: 100%;
			border: 1px solid #ccc;
			font-size: $font_mini;
			th {
				text-align: center;
			}

			th,
			td {
				border: 1px solid #ccc;
				line-height: 1.4;
				white-space: wrap;
				word-break: break-all;
				vertical-align: middle;
				padding: 0.5em;
			}
		}
		a {
			color: $color_main;
		}
	}
}

.pr-2 {
	border-radius: 20px;
}

.fix-place {
	height: 200px;
}

.tese-img {
	overflow: hidden;
	img {
		height: 81vw;
		object-position: left bottom;
		object-fit: cover;
	}
}

.ic-foot {
	text-align: center;
	margin: $space_7 0;
	font-size: $font_small_x;
	line-height: 1.24;
}

.foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	font-size: $font_medium;

	span {
		padding: 8px 5px;
		:not(:last-child) {
			border-right: 1px solid #000;
		}
	}
}

.last-btn {
	background-image: linear-gradient(135deg, #ff8e2c, #ff0d0d);
	height: 124px;

	color: #fff;
	border-radius: 99px;
	box-shadow: 0 5px 12px 0 rgba(255, 46, 0, 0.2);
	position: absolute;
	left: 64px;
	right: 64px;
	bottom: 70px;
	b {
		font-size: $font_max;
		font-weight: 600;
	}
	span {
		font-size: $font_medium;
	}
}
</style>
